.owl-carousel
  -webkit-tap-highlight-color: transparent
  position: relative

  .owl-item
    -webkit-tap-highlight-color: transparent
    position: relative

  display: none
  width: 100%
  z-index: 1

  .owl-stage
    position: relative
    -ms-touch-action: pan-Y
    touch-action: manipulation
    -moz-backface-visibility: hidden

    &:after
      content: "."
      display: block
      clear: both
      visibility: hidden
      line-height: 0
      height: 0

  .owl-stage-outer
    position: relative
    overflow: hidden
    -webkit-transform: translate3d(0, 0, 0)

  .owl-item, .owl-wrapper
    -webkit-backface-visibility: hidden
    -moz-backface-visibility: hidden
    -ms-backface-visibility: hidden
    -webkit-transform: translate3d(0, 0, 0)
    -moz-transform: translate3d(0, 0, 0)
    -ms-transform: translate3d(0, 0, 0)

  .owl-item
    min-height: 1px
    float: left
    -webkit-backface-visibility: hidden
    -webkit-touch-callout: none

    img
      display: block
      width: 100%

  .owl-dots.disabled, .owl-nav.disabled
    display: none

.no-js .owl-carousel
  display: block

.owl-carousel
  &.owl-loaded
    display: block

  .owl-dot
    cursor: pointer
    -webkit-user-select: none
    -khtml-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none

  .owl-nav
    .owl-next, .owl-prev
      cursor: pointer
      -webkit-user-select: none
      -khtml-user-select: none
      -moz-user-select: none
      -ms-user-select: none
      user-select: none

    button
      &.owl-next, &.owl-prev
        background: 0 0
        color: inherit
        border: none
        padding: 0 !important
        font: inherit

  button.owl-dot
    background: 0 0
    color: inherit
    border: none
    padding: 0 !important
    font: inherit

  &.owl-loading
    opacity: 0
    display: block

  &.owl-hidden
    opacity: 0

  &.owl-refresh .owl-item
    visibility: hidden

  &.owl-drag .owl-item
    -ms-touch-action: pan-y
    touch-action: pan-y
    -webkit-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none
    overflow: hidden

  &.owl-grab
    cursor: move
    cursor: grab

  &.owl-rtl
    direction: rtl

    .owl-item
      float: right

  .animated
    animation-duration: 1s
    animation-fill-mode: both

  .owl-animated-in
    z-index: 0

  .owl-animated-out
    z-index: 1

  .fadeOut
    animation-name: fadeOut

@keyframes fadeOut
  0%
    opacity: 1

  100%
    opacity: 0

.owl-height
  transition: height .5s ease-in-out

.owl-carousel
  .owl-item
    .owl-lazy
      opacity: 0
      transition: opacity .4s ease

      &:not([src]), &[src^=""]
        max-height: 0

    img.owl-lazy
      transform-style: preserve-3d

  .owl-video-wrapper
    position: relative
    height: 100%
    background: #000

  .owl-video-play-icon
    position: absolute
    height: 80px
    width: 80px
    left: 50%
    top: 50%
    margin-left: -40px
    margin-top: -40px
    background: url(owl.video.play.png) no-repeat
    cursor: pointer
    z-index: 1
    -webkit-backface-visibility: hidden
    transition: transform .1s ease

    &:hover
      -ms-transform: scale(1.3, 1.3)
      transform: scale(1.3, 1.3)

  .owl-video-playing
    .owl-video-play-icon, .owl-video-tn
      display: none

  .owl-video-tn
    opacity: 0
    height: 100%
    background-position: center center
    background-repeat: no-repeat
    background-size: contain
    transition: opacity .4s ease

  .owl-video-frame
    position: relative
    z-index: 1
    height: 100%
    width: 100%

// Owl Carousel Theme

.owl-theme
  .owl-dots
    text-align: center
    -webkit-tap-highlight-color: transparent

  .owl-nav
    text-align: center
    -webkit-tap-highlight-color: transparent
    margin-top: 10px

    [class*=owl-]
      color: #FFF
      font-size: 14px
      margin: 5px
      padding: 4px 7px
      background: #D6D6D6
      display: inline-block
      cursor: pointer
      border-radius: 3px

      &:hover
        background: #869791
        color: #FFF
        text-decoration: none

    .disabled
      opacity: .5
      cursor: default

    &.disabled + .owl-dots
      margin-top: 10px

  .owl-dots .owl-dot
    display: inline-block
    zoom: 1

    span
      width: 10px
      height: 10px
      margin: 5px 7px
      background: #dec3c3
      display: block
      -webkit-backface-visibility: visible
      transition: opacity .2s ease
      border-radius: 30px

    &.active span, &:hover span
      background: #e75d5d


// Owl Nav
.carousel-wrap
  width: 1000px
  margin: auto
  position: relative

.owl-carousel .owl-nav
  overflow: hidden
  height: 0px

.owl-theme .owl-dots .owl-dot
  &.active span, &:hover span
    background: #2caae1

.owl-carousel
  .item
    text-align: center
  .nav-btn
    position: absolute
    cursor: pointer
    width: 80px
    height: 80px
    top: 30%
    @media (max-width: 1280px)
      height: 55px
      width: 55px
      top: 30%
    @media (max-width: 420px)
      height: 45px
      width: 45px
      top: 25%

  .owl-prev.disabled, .owl-next.disabled
    pointer-events: none
    opacity: 0.2

  .prev-slide
    background: transparent url(../img/icon/icon_left_black.svg) no-repeat center
    left: -60px
    background-size: 60px
    border-radius: 50%
    &:hover
      background-color: rgba(228, 228, 228, 0.48)
    @media (max-width: 1280px)
      background: #ffffffad url(../img/icon/icon_left_black.svg) no-repeat center
      box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24)
      left: -20px
      background-size: 40px
    @media (max-width: 420px)
      background-size: 34px


  .next-slide
    background: transparent url(../img/icon/icon_right_black.svg) no-repeat center
    right: -60px
    background-size: 60px
    border-radius: 50%
    &:hover
      background-color: rgba(228, 228, 228, 0.48)
    @media (max-width: 1280px)
      background: #ffffffad url(../img/icon/icon_right_black.svg) no-repeat center
      box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24)
      right: -20px
      background-size: 40px
    @media (max-width: 420px)
      background-size: 34px




span.img-text
  text-decoration: none
  outline: none
  transition: all 0.4s ease
  -webkit-transition: all 0.4s ease
  -moz-transition: all 0.4s ease
  -o-transition: all 0.4s ease
  cursor: pointer
  width: 100%
  font-size: 23px
  display: block
  text-transform: capitalize

  &:hover
    color: #2caae1
